<template>
  <component :is="view"></component>
</template>

<script setup>

import LoginView from './views/LoginView.vue' ;
import MainView from './views/MainView.vue' ;
import {ref, watch} from 'vue'
import {useRoute} from 'vue-router'

const view = ref(null) ;
const route = useRoute();

watch(route, (r)=> {
   view.value = r.name === 'login' ? LoginView: MainView
})

</script>

<style>

body, html {
  height: 100%;
}

#app {
  height: 100%;
}

::-webkit-scrollbar {
  width:5px;
}
::-webkit-scrollbar-track {
  background:#f2f2f2;
}
::-webkit-scrollbar-thumb {
  background:rgba(0,0,0,.2);
}
::-webkit-scrollbar-thumb:hover {
  background:#f2f2f2;
}
::-webkit-scrollbar-thumb:active {
  background:rgba(0,0,0,0.2);
}


</style>



